<!--
 * @Author: 清羽
 * @Date: 2022-12-07 21:42:29
 * @LastEditTime: 2022-12-09 18:14:36
 * @LastEditors: you name
 * @Description: 
-->
<!-- category 页 -->
<template>
  <div
    class="category"
    v-loading.fullscreen.lock="treeLoading"
    element-loading-text="玩命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.6)"
  >
    <!-- <el-button>添加分类</el-button> -->
    <div class="tree">
      <el-tree
        :data="categoryList"
        :props="defaultProps"
        default-expand-all
        node-key="_id"
        :expand-on-click-node="false"
      >
        <span
          class="custom-tree-node"
          slot-scope="{ node, data }"
        >
          <span>{{ node.label }}</span>
          <span>

            <el-button
              v-if="data.child"
              :class="{'margin-right':data._id=='0'}"
              @click="openDialog(data,'add')"
            >添加</el-button>
            <el-button
              v-if="(data._id!=='0')"
              type="danger"
              @click="delCategory(data._id)"
            >删除</el-button>
            <el-button
              type="success"
              v-if="(data._id!=='0')"
              @click="openDialog(data,'update')"
            >
              <i class="el-icon-edit"></i>修改名称
            </el-button>
          </span>
        </span>
      </el-tree>
    </div>

    <el-dialog
      :title="'在 '+isCategoryName+' 下添加分类'"
      :visible.sync="dialogFormVisible"
      @close="resetForm('dialogForm')"
      :destroy-on-close="true"
    >
      <el-form
        :model="from"
        label-width="100px"
        ref="dialogForm"
        :rules="ruleValidate"
      >
        <el-form-item
          label="分类名称"
          prop="categoryName"
        >
          <el-input
            clearable
            v-model="from.categoryName"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          :loading="loading"
          type="primary"
          @click="submit('dialogForm')"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>


export default {
  name: "category",
  data () {
    return {
      treeLoading: false,
      categoryList: [{
        cateName: '--------我是顶级分类-----------',
        _id: '0',
        child: []
      }],
      defaultProps: {
        children: 'child',
        label: 'cateName'
      },
      dialogFormVisible: false, //  弹出框
      isCategoryId: null,       // 选中需要操作的id
      isCategoryName: null,      // 需要操作的分类名称
      from: {
        categoryName: ''
      },
      ruleValidate: {
        categoryName: { required: true, message: "不能为空", trigger: "blur" },
      },
      loading: false, // 按钮loading
      type: '', // 状态 -- add ? update
    }
  },
  components: {},
  // 生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {
    this.getData()
  },
  // 函数
  methods: {
    async getData () {
      this.treeLoading = true
      // 获取数据
      this.$api.category.getCategories().then(response => {
        this.categoryList[0].child = response.data
        // console.log("this.$api.category.getCategories => this.categoryList", this.categoryList)
        this.treeLoading = false
      }).catch(() => {
        this.treeLoading = false
      })
    },


    // 关闭弹出层 的回调
    resetForm (formName) {
      // 重置表单
      this.$refs[formName].resetFields()
      this.isCategoryId = null
      this.isCategoryName = null
    },

    // 打开弹出层
    openDialog (data, type) {
      this.type = type
      this.isCategoryId = data._id
      this.isCategoryName = data.cateName
      this.dialogFormVisible = true

      if (type == 'update') {
        this.from.categoryName = this.isCategoryName
      }
    },

    // 确认按钮
    async submit (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loading = true
          if (this.type == 'add') {
            this.addCategory()
            this.loading = false
          } else if (this.type == 'update') {
            this.updateCategory()
            this.loading = false
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    async addCategory () {
      this.$api.category.addCategory({ pid: this.isCategoryId, categoryName: this.from.categoryName }).then(response => {
        this.getData()
        this.dialogFormVisible = false
        this.$message({
          type: 'success',
          message: response.msg
        })
      })
    },

    // 删除分类
    async delCategory (id) {
      console.log(id);
      this.$api.category.deleteCategory({ categoryId: id }).then(response => {
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        this.getData()
      })
    },

    // 修改分类名称
    async updateCategory () {
      this.$api.category.updateCategory({ categoryId: this.isCategoryId, categoryName: this.from.categoryName }).then(response => {
        this.getData()
        this.dialogFormVisible = false
        this.$message({
          type: 'success',
          message: '修改成功'
        })
      })
    },
  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.category {
  padding: 10px;
  .tree {
    width: 500px;
    display: flex;
    // justify-content: center;
    align-items: center;
    .custom-tree-node {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }

    .el-tree {
      width: 100%;

      ::v-deep .el-tree-node__content {
        height: 48px;
      }
    }
  }
}

.margin-right {
  margin-right: 202px;
}
</style>